<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
        <a-form>
          <a-row>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.kuan-du')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-model="style.width" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-kuan-du')" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.zi-dong-huang-hang')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <kCheckbox v-model="style.isWrap"/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.yin-cang')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <kCheckbox v-model="style.isColumnHidden"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

  import kCheckbox from "../designer/packages/KCheckbox/index";

  export default {
    name: 'ColumnExportRulesDialog',
    components: {
      kCheckbox,
    },
    data() {
      return {
        title: this.$t('m.common.label.operate'),
        visible: false,
        record: {},
        style: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 18},
        },
      }
    },
    methods: {
      open(json, record) {
        this.record = record ? record : {}
        this.title = this.$t('m.eform.formDesign.label.dao-chu-yang-shi-pei-zhi')
        this.title += this.record.colName ? ('——' + this.$locale(this.record.colName)) : ''
        // 为了校验规则可以设置长度
        this.record.type = "input"
        this.style = (json && json != '') ? JSON.parse(json) : {}
        this.visible = true
      },

      handleOk() {
        // TODO 修复Bug
        if (Object.keys(this.style).length > 0) {
          this.$emit('selectFinished', JSON.stringify(this.style))
        } else {
          this.$emit('selectFinished', '')
        }
        this.visible = false
      },
      handleCancel() {
        this.visible = false
      },
    }
  }
</script>
